<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>分析生命周期</title>
    <!-- 引入Vue.js -->
    <script src="../js/vue.js"></script>
  </head>
  <body>
    <!-- 准备好一个容器 -->
    <!-- 包括 #root所在的节点和内部的全部内容都作为模板  包含<div id='root'></div>-->
    <div id="root" :x="n">
      <h2>当前的n值是：{{n}}</h2>
      <h2 v-text="n"></h2>
      <button @click="add">点我n +1</button>
      <button @click="bye">点我销毁 vm</button>
    </div>
  </body>
  <script>
    const vm = new Vue({
      el: "#root",
      // 要解析的模板,可以也写在<div id:"root"></div>中
      /* template: `
      <div>
        <h2>当前的n值是：{{n}}</h2>
        <button @click="add">点我n+1</button>
      </div>  
      `, */
      /* 使用template语法解析模板不会将包括#root节点内的全部内容进行替换 
      不包含<div id='root'></div> */
      data() {
        return {
          n: 1,
        };
      },
      methods: {
        add() {
          console.log("add");
          this.n++;
        },
        bye() {
          console.log("bye");
          this.$destroy(); // 销毁 vm
        },
      },
      watch: {
        n(val) { // 监视属性n
          console.log("n变了");
        },
      },
      // 1.挂载流程
      // 此时无法通过 vm 访问data中的数据和methods中的方法
      beforeCreate() {
        console.log("beforeCreate");
        console.log(this);
        // debugger; // 调试断点,让代码运行到此处并停止
      },

      // 此时可以通过vm访问到data中的数据,methods中配置的方法
      created() {
        console.log("created");
        console.log(this);
        // debugger;
      },

      // 此时页面呈现的是未经Vue编译的DOM结构,创建了虚拟DOM还未插入真实DOM,
      // 所有对DOM的操作 最终 都不生效
      beforeMount() {
        console.log("beforeMount");
        // console.log(this);
        // document.querySelector("h2").innerHTML="hello"; 最终不生效
        // debugger;
      },

      // 此时页面呈现的是经过Vue编译的DOM结构,创建了真实DOM,所有对DOM的操作最终生效
      mounted() {
        console.log("mounted");
        // console.log(this);
        // document.querySelector("h2").innerHTML="hello"; // 最终会生效
        // debugger;
      },

      // 2.调用了数据更新的方法 执行更新流程
      // 此时数据是新的但页面是旧的,在beforeUpdata钩子中数据和页面还尚未同步
      beforeUpdate() {
        console.log("beforeUpdate");
        // console.log(this.n);
        // debugger;
      },
      // 此时数据是新的页面也是新的
      updated() {
        console.log("updated");
        // console.log(this.n);
        // debugger;
      },

      // 3.调用了$destroy 执行销毁流程
      // 此时vm中的data,methods,指令都还可用,但对数据的修改不会再触发页面的更新了
      beforeDestroy() {
        console.log("beforeDestroy");
        this.add(); // 方法可用
        console.log(this.n); // data中的数据还会进行更新但页面不会进行更新了
        debugger;
      },
      destroyed() {
        console.log("destroyed");
        debugger;
      },
    });

    // vm.$mount("#root") 设置el的另一种方法
  </script>
</html>
